<template>
	<view class=" ">
		<tn-navbar>在场车辆 </tn-navbar>
		<view class="tn-m">
			<tn-form ref="formRef" :model="formData" label-position="top">
				<tn-form-item label="所属车场" prop="parkingLotName">
					<tn-input v-model="formData.parkingLotName" disabled
					 ></tn-input>
				</tn-form-item>
				<tn-form-item label="车牌" prop="carPlate">
				 
					<view @click="openKeyboard()">
						<tn-input style="pointer-events:none"
							:model-value=" formData.carPlate"  />
					</view>
 				</tn-form-item>
				<tn-form-item label="车主姓名" prop="ownerName">
					<tn-input v-model="formData.ownerName"></tn-input>
				</tn-form-item>
				<tn-form-item label="车主电话" prop="ownerPhone">
					<tn-input v-model="formData.ownerPhone"></tn-input>
				</tn-form-item>
				<tn-form-item label="地址" prop="address">
					<tn-input v-model="formData.address"></tn-input>
				</tn-form-item>
				<tn-form-item label="计费方式" prop="billingMethod" required>
					<view @click="openPicker('billingMethod')">
						<tn-input style="pointer-events:none"
							:model-value="pickerDict.label.billingMethod[formData.billingMethod]"
							placeholder="请选择计费方式" />
					</view>
				</tn-form-item>
				<tn-form-item label="计费车型" prop="carType" required>
					<view @click="openPicker('carType')">
						<tn-input style="pointer-events:none" :model-value="pickerDict.label.carType[formData.carType]"
							placeholder="请选择车型" />
					</view>
				</tn-form-item>
				<tn-form-item label="单价" prop="unitPrice">
					<tn-input v-model="formData.unitPrice"></tn-input>
				</tn-form-item>
				<tn-form-item label="数量" prop="quantity">
					<tn-input v-model="formData.quantity"></tn-input>
				</tn-form-item>
				<tn-form-item label="余额" prop="balance">
					<tn-input v-model="formData.balance"></tn-input>
				</tn-form-item>
				<tn-form-item label="应收" prop="amountReceivable">
					<tn-input v-model="formData.amountReceivable"></tn-input>
				</tn-form-item>
				<tn-form-item label="实收" prop="amountReceived">
					<tn-input v-model="formData.amountReceived"></tn-input>
				</tn-form-item>
				<tn-form-item label="有效期开始" prop="validityStart">
					<tn-input v-model="formData.validityStart" type="date"></tn-input>
				</tn-form-item>
				<tn-form-item label="有效期截止" prop="validityEnd">
					<tn-input v-model="formData.validityEnd" type="date"></tn-input>
				</tn-form-item>
				<tn-form-item label="备注" prop="remarks">
					<tn-input v-model="formData.remarks"></tn-input>
				</tn-form-item>
				<tn-form-item label="是否录入不续费" prop="noRenewal">
					<view @click="openPicker('noRenewal')">
						<tn-input style="pointer-events:none"
							:model-value="pickerDict.label.noRenewal[formData.noRenewal]" placeholder="请选择" />
					</view>
				</tn-form-item>
			</tn-form>
			<view class="tn-tabbar-height"></view>
		</view>
		<!-- 选择器 -->
		<tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />
	
		<!-- 悬浮按钮 -->
		<view  class="floating-button tn-flex justify-center tn-mt-xl" ><tn-button @click="confirmEdit" width="80%" size="xl" text-color="tn-white"
			bg-color="tn-gradient-bg__cool-8">确认</tn-button></view>
		<!-- 车牌键盘 -->
		<tn-keyboard v-model="formData.carPlate" v-model:show="showKeyboard"  mode="car" :car-lang="carLang" @confirm="confirmKeyboardValue" @change="changeKeyboardValue"/>

	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { BILLING_METHODS, CAR_TYPES, COMMON_YES_NO } from "@/utils/dict"; // 引入计费方式和车型字典
import { onLoad } from "@dcloudio/uni-app";
// 车牌键盘 控制
const showKeyboard = ref(false);
const carLang = ref('zh');
const openKeyboard = () => {
	showKeyboard.value = true;
};

const closeKeyboard = () => {
	showKeyboard.value = false;
};
const changeKeyboardValue = (value:String) => {
	 console.log('changeKeyboardValue=>',formData.value.carPlate)

	formData.value.carPlate = value;
	console.log('changeKeyboardValue length=>',formData.value.carPlate.length)
	if(formData.value.carPlate.length>=1){
		carLang.value='en';
	}
};

const confirmKeyboardValue = (value:String) => {
	formData.value.carPlate = value;
};
// 字典枚举映射
const pickerDict = ref({
	dict: {
		billingMethod: BILLING_METHODS,
		carType: CAR_TYPES,
		noRenewal: COMMON_YES_NO
	},
	label: {}
});

// 选择器key
const pickerKey = ref('');
// 选择器数据
const pickerData = ref([]);

// 控制选择器的可见性
const openPickerVisible = ref(false);

// 打开选择器
const openPicker = (type) => {
	pickerKey.value = type;
	pickerData.value = pickerDict.value.dict[type];
	openPickerVisible.value = true; // 显示选择器
};

// 关闭选择器
const closePicker = () => {
	openPickerVisible.value = false; // 隐藏选择器
};

// 确认选择器的选择
const confirmPicker = (value) => {
	formData.value[pickerKey.value] = value;
	closePicker(); // 关闭选择器
};

// 处理pickerDict.value 内的字典数据格式为 {billingMethod:{value:label}}
const getDictLabel = () => {
	pickerDict.value.label = {};
	for (let key in pickerDict.value.dict) {
		let dict = pickerDict.value.dict[key];
		pickerDict.value.label[key] = dict.reduce((acc, cur) => {
			acc[cur.value] = cur.label;
			return acc;
		}, {});
	}
};



// 表单数据模型
const formData = ref({
	parkingLotName: null,
	carPlate: "",
	ownerName: "",
	ownerPhone: "",
	address: "",
	billingMethod: "",
	unitPrice: "",
	quantity: "",
	balance: "",
	amountReceivable: "",
	amountReceived: "",
	validityStart: "",
	validityEnd: "",
	carType: "",
	remarks: "",
	noRenewal: null,
});

const confirmEdit = () => {
	// TODO: 提交表单数据
	console.log(formData.value);
};

onLoad(() => {
	getDictLabel();
});
</script>

<style lang="scss" scoped>
/* 底部安全边距 start*/
.tn-tabbar-height {
	min-height: 180rpx;
	height: calc(180rpx + env(safe-area-inset-bottom) / 2);
	height: calc(180rpx + constant(safe-area-inset-bottom));
}

/* 悬浮按钮样式 */
.floating-button {
	position: fixed;
	/* 固定定位 */
	bottom: 20rpx;
	/* 距离底部20rpx */
	left: 0;
	/* 左对齐 */
	right: 0;
	/* 右对齐 */
	margin: 0 auto;
	/* 居中 */
}
</style>
